<script setup lang="ts">
import { reactive, toRaw, toRef, toRefs } from "vue";

interface stuent {
  name: string
  age: number
}

let stuenta: stuent = reactive({
  name: "喜羊羊",
  age: 18
})

let state = toRef(stuenta, "age")
let states = toRefs(stuenta)
let stateToRaw = toRaw(stuenta)
const changeToRef = () => {
  stuenta.age++
  console.log(stuenta, state)
}

const changeToRaw = () => {
  stateToRaw.age++
  console.log(stuenta, state)

}
</script>

<template>
  <h1>认识to全家桶</h1>
  <ul>
    <li>toRef 如果原始对象是非响应式的就不会更新视图 数据是会变的</li>
    <li>toRefs 如果原始对象是响应式的是会更新视图并且改变数据的</li>
    <li>toRaw 将响应式对象转化为普通对象</li>
  </ul>

  <li>toRef 如果原始对象是非响应式的就不会更新视图 数据是会变的</li>
  <div>
    {{ stuenta }}
    <br>
    {{ states }}
    <br>{{ stateToRaw }}
  </div>
  <button @click="changeToRef">change</button>

  <li>toRaw 将响应式对象转化为普通对象</li>
  <div>
    {{ stateToRaw }}
  </div>
  <button @click="changeToRaw">change</button>
</template>

<style>
</style>
